<template>
	<div>
		<div class="popZan" :style="zanStyle">
			<img :src="partData.imgUrl" alt="" />
			<!--<img src="../../assets/public/right.png" alt="" />-->
			<p v-html="partData.pContent"></p>
		</div>
	</div>
</template>

<script>
  export default {
    data () {
      return {
        zanStyle: {
          top: '200px',
          left: '200px'
        }
      }
    },
    mounted () {
      var that = this
      function styleChange (zan) {
        var stWidth = window.innerWidth
        var stHeight = window.innerHeight
        var conTop = stHeight / 2 - 75
        var conLeft = stWidth / 2 - 150
        zan.zanStyle.top = conTop + 'px'
        zan.zanStyle.left = conLeft + 'px'
      }
      styleChange(that)
      window.onresize = function () {
        styleChange(that)
      }
    },
    props: ['partData']
  }
</script>

<style scoped>
	.popZan {
		width: 320px;
		height: auto;
		background: rgba(0,0,0,.6);
		box-shadow: 0 8px 20px 0 rgba(224,224,224,0.50);
		border-radius: 5px; 
		position: fixed;
		z-index: 11;
	}
	.popZan img {
		margin: 0 auto;
		margin-top: 35px;
		display: block;
		width: 40px;
		height: 40px;
		background: white;
	}
	.popZan p {
		margin-top: 15px;
		margin-bottom: 25px;
		font-size: 24px;
		color: #FFFFFF;
		text-align: center;
	}
</style>